<template>
	<div class="release_box">
        <div class="head">
            <p class="title">提示：点击发布人头像可直接私信，并可查看联系方式</p>
        </div>
        <div class="city" @click="changeCityPop">
            接单到：<p><span>{{cityMsg.name?cityMsg.name:'请选择'}}</span><u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon></p>
        </div>
        <u--textarea cursorSpacing="80" :showConfirmBar="false" v-model="message" placeholder="注意⚠️接单请写具体城市！" ></u--textarea>
        <div class="photo">
            <div class="img" v-for="(item,index) in imgList" :key="index">
                <img :src="item" alt="">
                <p class="close" @click="closeImg(index)">
                    <u-icon name="trash" color="#fff" size="18"></u-icon>
                </p>
            </div>
            
            <div class="add" @click="changeImg" v-if="imgList.length < 3">
                <div class="mr" style="margin-right:0">
                    <img src="/static/photo.png" alt="">
                    <p>添加照片</p>
                </div>
                <!-- <p class="photo_num">{{imgList.length}} / 3</p> -->
            </div>
        </div>

        <div class="anniu_box">
            <u-button 
                @click="sendSubmit"
                :disabled="isDisable"
                loadingMode="circle"
                :loading="isDisable"
                loadingText="发送中..."
                type="primary" 
                text="发送"
            >
            </u-button>
            <div class="tips">
                <p class="text">本账号当前还可发布 <span>{{notUsedCount}}</span> 条接单信息</p>
                <p class="an" @click="toTaocan">去增加/转赠</p>
            </div>
        </div>

        <!-- 选择接单群 -->
        <city-picker :isRefresh1="isRefresh1" :show="isCityShow" @closeCity="closeCity" @confirm="changeCity"></city-picker>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import api from '@/api';
    import Config from '@/config/index.js'
    import { Debounce } from '@/utils/utils.js'
	export default {
        options: {
            styleIsolation: 'shared'
        },
        props: {
			isRefresh: {
				type: Number,
				default: 0
			},
            notUsedCount:{
                type:Number,
            }
		},
        watch:{
            isRefresh:{
                handler(n,o){
                    if(n){
                        console.log("刷新了");
                        this.cityMsg = {}
                        this.message = ''
                        this.imgList = []
                    }
                }
            }
        },
		data() {
			return {
                isCityShow:false,
                cityMsg:{},
				message:'',
                imgList:[],
                isDisable:false,// 提交
                isRefresh1:0
			}
		},
        computed: {
			...mapState({
                userName:state => state.user.userName,
				userId: state => state.user.userId,
                token: state => state.user.token
			})
		},
		methods: {

            // 选择城市弹窗
            changeCityPop(){
                this.isCityShow = true
                this.isRefresh1 = 1
            },

            // 发送消息
            sendSubmit:Debounce(async function () {
                if(!this.cityMsg.id){
                    this.$toast('请选择接单群！')
                    return
                }
                if(!this.message){
                    this.$toast('请输入内容！')
                    return
                }
                let data = {
                    message:this.message,
                    memberUserId:this.userId,
                    memberUserName:this.userName,
                    createDate:Date.now(),
                    type:1,
                    pictureList:this.imgList,
                    messageLength:this.message.length,
                    sendGroupUserId:this.cityMsg.id,
                    sendGroupUserName:this.cityMsg.name
                }
                this.isDisable = true
                uni.showLoading({title: '发送中...'})
                api.user.add_news(data).then(res=>{
                    if(res.code == 200){
                        uni.hideLoading()
                        this.isDisable = false
                        this.$emit('close',true)
                    }else{
                        uni.hideLoading()
                        this.isDisable = false
                        this.$toast(res.msg)
                    }
                })
            },300),

            // 关闭发送弹窗
            close(){
                this.$emit('close',false)
            },

            // 选择图片
            changeImg(){
                if(this.imgList.length >= 5){
                    this.$toast('最多上传3张！')
                    return
                }
                let arr = []
                uni.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success :(res)=>{
                        uni.showLoading({title: '上传中...'})
                        console.log(res)
                        uni.uploadFile({
                            url: `${Config.apiUpload}`,
                            name: 'file',
                            method: 'POST',
                            filePath: res.tempFilePaths[0],
                            header: {
                                'Authorization': `Bearer ${this.token}`,
                            },
                            formData: {
                                file: res.tempFilePaths[0],
                            },
                            success: (res) => {
                                let returnData = JSON.parse(res.data)
                                arr.push(returnData.data)
                                this.imgList = this.imgList.concat(arr)
                                console.log(this.imgList)
                                uni.hideLoading()
                                this.$toast('上传成功！')
                            },
                            fail: (err) => {
                                uni.hideLoading()
                                this.$toast('上传失败，请重新上传！')
                            }
                        })
                    }
                })
            },

            closeImg(index){
                let arr = []
                arr = this.imgList
                arr.splice(index, 1)
                this.imgList = []
                this.imgList = arr
            },
			

            // 确定接单群
            changeCity(e){
                console.log(e)
                this.cityMsg = e
                this.isCityShow = false
            },

            // 关闭接单群弹窗
            closeCity(){
                this.isCityShow = false
                this.isRefresh1 = 0
            },

            // 跳转套餐
            toTaocan(){
                uni.navigateTo({
                    url: '/pages/taocan/index'
                });
            }

		},
        mounted(){
            
        },
        onLoad() {
		},
		onShow(){
        }
	}
</script>

<style lang="scss" scoped>
    @mixin content-flex($pitch) {
		display: flex;
		align-items: center;
		justify-content:  $pitch;
	}
	.release_box{
        border-radius: 20rpx 20rpx 0px 0px;
        background: #f7f7f7;
        .head{
            padding:20rpx 30rpx 50rpx 30rpx;
            border-radius: 20rpx 20rpx 0px 0px;
            @include content-flex(space-between);
            .title{
                font-size: 28rpx;
                font-weight: 500;
                color: #23AC39;
            }
        }
        .city{
            margin:0 30rpx;
            font-size: 30rpx;
            color:#333;
            @include content-flex('');
            p{
                color: #999999;
                @include content-flex('');
                span{
                    margin-right:10rpx;
                }
            }
        }
        /deep/ .u-textarea{
            height: 167px;
            background: #fff;
            padding:24rpx;
            font-size:28rpx;
            flex: inherit;
            border:none;
            -webkit-appearance: none;
            color: #000;
            margin:20rpx 30rpx 0 30rpx;
            textarea{
                height: 100% !important;
            }
        }
        .photo{
            margin:24rpx 28rpx 10rpx 28rpx;
            display: flex;
            flex-wrap:wrap;
            .add{
                .photo_num{
                    width: 220rpx;
                    font-size: 26rpx;
                    color: #999999;
                    text-align: center;
                }
            }
            .mr{
                width: 220rpx;
                height: 220rpx;
                border-radius: 12rpx;
                background: #FFFFFF;
                margin:0 16rpx 16rpx 0;
                flex-direction:column;
                @include content-flex(center);
                &:nth-child(3n){
                    margin-right:0;
                }
                img{
                    width: 64rpx;
                    height: 64rpx;
                    margin-bottom:4rpx;
                }
                p{
                    font-size: 24rpx;
                    color: #999999;
                }
            }
            .img{
                @extend .mr;
                position: relative;
                
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 12rpx;
                }
                .close{
                    width: 100%;
                    height: 50rpx;
                    background:rgba(0, 0, 0, 0.5);
                    position: absolute;
                    bottom:0;
                    left:0;
                    border-bottom-left-radius: 12rpx;
                    border-bottom-right-radius: 12rpx;
                    @include content-flex('center');
                    /deep/ .u-icon--right{
                        margin:0 auto;
                    }
                }
            }
        }
        
        .anniu_box{
            margin:0 28rpx;
            text-align: center;
            /deep/ .u-button{
                height: 96rpx;
                line-height: 96rpx;
                border-radius: 100rpx;
                background: #23AC39;
                font-size: 32rpx;
                text-align: center;
                font-weight: 500;
                color:#fff;
                border:none;
            }
            .tips{
                @include content-flex(center);
                margin:26rpx 0;
                .text{
                    font-size: 28rpx;
                    color: #333333;
                    span{
                        color:#FF4441;
                    }
                }
                .an{
                    width: 210rpx;
                    height: 62rpx;
                    line-height: 62rpx;
                    border-radius: 100rpx;
                    background: #23AC39;
                    color: #FFFFFF;
                    font-size:28rpx;
                    text-align: center;
                    margin-left:12rpx;
                }
            }
        }
    }
</style>
